<template>
    <div class="home">
        <home-header></home-header>
        <home-swiper :sl="swiperList"></home-swiper>
        <home-icon :dt="iconList"></home-icon>
        <home-recommend :dt="recommendList"></home-recommend>
        <home-weekend :dt="weekendList"></home-weekend>
    </div>
</template>

<script>
    /*
    * 页面使用组件的步骤：
    * 第一步：import导入组件
    * 第二步：在当前页面注册该组件
    * 第三步：html中使用组件
    * */
    import HomeHeader from "./components/HomeHeader"
    import HomeSwiper from "./components/HomeSwiper"
    import HomeIcon from "./components/HomeIcon"
    import HomeRecommend from "./components/HomeRecommend"
    import HomeWeekend from "./components/HomeWeekend"
    export default {
        name: "Home",
        data() {
          return {
              swiperList: [],
              iconList: [],
              recommendList: [],
              weekendList: []
          }
        },
        created() {

            // 请求数据
            this.$axios.get('/mock/index.json').then((res) => {
                const dt = res.data.data
                this.swiperList = dt.swiperList
                this.iconList = dt.iconList
                this.recommendList = dt.recommendList
                this.weekendList = dt.weekendList


            }).catch((error) => {
                console.log('请求失败！')
            })

        },
        components: {
            HomeHeader,
            HomeSwiper,
            HomeIcon,
            HomeRecommend,
            HomeWeekend
        }
    }
</script>

<style scoped>

</style>